<template>
  <div id="page-club">
    <h2>俱乐部/赛事方申请</h2>

    <Card>
      <Form
        ref="form"
        :model="form.data"
        :rules="ruleValidate"
        :label-width="120"
        class="club-info-form mt20">

        <div class="mb20" v-if="form.data.matchStatus">
          <Alert type="success" show-icon v-if="form.data.matchStatus==='2'">申请资料已审核成功！</Alert>
          <Alert type="success" show-icon v-if="form.data.matchStatus==='1'">申请资料正在审核！</Alert>
          <Alert type="warning" show-icon v-if="form.data.matchStatus==='-2'">申请资料审核不通过！</Alert>
        </div>

        <Collapse class="mt20 mb20">
          <Panel>
            俱乐部/赛事方基本信息
            <div slot="content" style="padding: 20px;">
              <Row>
                <Col span="11">
                  <FormItem prop="logoPath" label="Logo" style="height: 140px; overflow:hidden">
                    <img :src="form.data.logoPath | absImg" style="max-width: 50%"/>
                  </FormItem>
                  <FormItem prop="rclubName" label="全称">
                    {{ form.data.rclubName }}
                  </FormItem>
                  <FormItem label="所在区域">
                    <Row>
                      <Col span="8">
                        <Select v-model="form.data.province" placeholder="请选择省份" disabled>
                          <Option v-for="(item, index) in areaCodeList" :value="item.code" :key="item.code">{{item.name}}</Option>
                        </Select>
                      </Col>
                      <Col span="7" offset="1">
                        <Select v-model="form.data.city" placeholder="请选择城市" disabled>
                          <Option v-for="(item, index) in cityList" :value="item.code" :key="item.code">{{item.name}}</Option>
                        </Select>
                      </Col>
                      <Col span="7" offset="1" placeholder="请选择区县">
                        <Select v-model="form.data.county" disabled>
                          <Option v-for="(item, index) in countyList" :value="item.code" :key="item.code">{{item.name}}</Option>
                        </Select>
                      </Col>
                    </Row>
                  </FormItem>
                  <FormItem prop="chagePerson" label="负责人姓名">
                    {{ form.data.chagePerson }}
                  </FormItem>
                  <FormItem prop="qqNo" label="负责人QQ">
                    {{ form.data.qqNo }}
                  </FormItem>
                  <FormItem prop="wechatNo" label="负责人微信">
                    {{ form.data.wechatNo }}
                  </FormItem>
                  <FormItem prop="qqGroup" label="QQ群">
                    {{ form.data.qqGroup }}
                  </FormItem>
                </Col>
                <Col span="11" offset="2">
                  <FormItem prop="qrCodePath" label="微信公众号" style="height: 140px; overflow:hidden">
                    <img :src="form.data.qrCodePath | absImg" style="max-width: 50%"/>
                  </FormItem>
                  <FormItem prop="rclubShortName" label="简称">
                    {{ form.data.rclubShortName }}
                  </FormItem>
                  <FormItem prop="address" label="地址">
                    {{ form.data.address }}
                  </FormItem>
                  <FormItem prop="phone" label="办公电话">
                    {{ form.data.phone }}
                  </FormItem>
                  <FormItem prop="mobile" label="负责人手机号">
                    {{ form.data.mobile }}
                  </FormItem>
                  <FormItem prop="email" label="邮件">
                    {{ form.data.email }}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="24">
                  <FormItem prop="introduce" label="简介">
                    {{ form.data.introduce }}
                  </FormItem>
                </Col>
              </Row>
            </div>
          </Panel>
        </Collapse>

        <div>
          <h3 class="mb30">赛事方申请资料</h3>
          <Row>
            <Col span="11">
              <FormItem prop="legalPerson" label="法人姓名">
                <Input v-model="form.data.legalPerson" type="text" placeholder="请输入" :disabled="form.data.matchStatus==='1'"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem prop="applyRemark" label="赛事申请备注">
                <Input v-model="form.data.applyRemark" type="textarea" placeholder="请输入" :rows="6" :disabled="form.data.matchStatus==='1'"></Input>
              </FormItem>
              <FormItem prop="businessLicence" label="营业执照">
                <img v-if="form.data.matchStatus==='1'" :src="form.data.businessLicence | absImg" style="max-width: 25%"/>
                <upload-img v-else-if="defaultImageList" @on-change="onUploadImg" :defaultImageList="defaultImageList"></upload-img>
              </FormItem>
              <FormItem v-if="form.data.matchStatus!=='1'">
                <Button type="primary" @click="onSubmit()" class="mr10">暂存</Button>
                <Button type="primary" @click="onSubmit(1)">提交审核</Button>
              </FormItem>
            </Col>
          </Row>
        </div>
      </Form>
    </Card>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import uploadImg from '@/components/upload-img'
  import codeApi from '@/api/code'
  import clubApi from '@/api/club'

  export default {
    name: 'page-club',
    components: {
      uploadImg
    },
    data () {
      return {
        isSubmiting: false,
        cityList: [],
        countyList: [],
        defaultImageList: null,
        ruleValidate: {
          legalPerson: [
            { required: true, message: '请输入法人名称', trigger: 'change' }
          ],
          applyRemark: [
            { required: true, message: '请输入赛事申请备注', trigger: 'change' }
          ]
        },
        query: {
          pkRclubInfo: null
        },
        form: {
          data: {},
          basic: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        areaCodeList: 'areaCodeList'
      })
    },
    watch: {
      'form.data.province': 'getCity',
      'form.data.city': 'getCounty'
    },
    methods: {
      onSubmit (status) {
        this.isSubmiting = true
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (status === 1) {
              this.form.data.matchStatus = 1
            }
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入项目!')
          }
          this.isSubmiting = false
        })
      },
      onUploadImg (imgList) {
        this.form.data.businessLicence = imgList.filter((item) => {
          return item.name.length > 0
        }).map((item) => {
          if (item.response && item.response.responseData) {
            return item.response.responseData
          } else {
            return item.name
          }
        }).join(',')
        this.$refs.form.validateField('businessLicence')
      },
      async submitForm () {
        const { body } = await clubApi.update(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          if (body.responseData.matchStatus === '1') {
            this.$Message.info('提交审核成功')
            location.reload()
          } else {
            this.$Message.info('保存成功')
          }
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async detail () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await clubApi.detail(this.query)
        const { responseData } = body
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = responseData
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.businessLicence || '')
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getCity () {
        let parentid = this.form.data.province
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid: String(parentid)
        })
        this.cityList = body.responseData.map((item) => {
          let area = Object.assign({}, item)
          area.code = String(area.code)
          return area
        })
      },
      async getCounty () {
        let parentid = this.form.data.city
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid: String(parentid)
        })
        this.countyList = body.responseData.map((item) => {
          let area = Object.assign({}, item)
          area.code = String(area.code)
          return area
        })
      }
    },
    async mounted () {
      this.$store.dispatch('getUserInfo')
      await this.$store.dispatch('getCode', 'area')
      this.detail()
    }
  }
</script>

<style lang="less">
  .club-info-form {
    width: 80%;
    margin: 0px auto;
    margin-top: 20px;
    .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
      font-size: 16px;
      font-weight: bold
    }
  }
</style>

